
<script lang="ts" setup >

import { reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";
import type { ElTree } from "element-plus";
import type { TreeKey } from "element-plus/es/components/tree/src/tree.type";
import type { IAdmin } from "@/mytype";
import {addAdminApi} from "@/api/admin"

// 声明一个取消事件：

let emit = defineEmits<{
    (e:"closeDrawer"):void,
    (e:"ok"):void    
}>();

// 定义一个表单对应的数据（要添加的数据）
const data = reactive<IAdmin>({
    adminname: "",
    password: "",
    role: "1",
    checkedKeys: new Array<TreeKey>()
})

const treeRef = ref<InstanceType<typeof ElTree>>();

interface Tree {
    key: string,
    label: string
    children?: Tree[]
}

const treedata: Tree[] = [
    {
        key: "0-0",
        label: '系统首页'
    },
    {
        key: "0-1",
        label: '轮播图',
        children: [
            {
                key: "0-1-0",
                label: '轮播图列表',
            },
            {
                key: "0-1-1",
                label: '添加轮播图',
            },
            {
                key: "0-1-2",
                label: '删除全部数据',
            }
        ]
    },
    {
        key: "0-2",
        label: '产品管理',
        children: [
            {
                key: "0-2-0",
                label: '产品列表',
            },
            {
                key: "0-2-1",
                label: '秒杀列表',
            },
            {
                key: "0-2-2",
                label: '推荐列表',
            },
            {
                key: "0-2-3",
                label: '筛选列表',
            }
        ]
    },
    {
        key: "0-3",
        label: '账户管理',
        children: [
            {
                key: "0-3-0",
                label: '用户列表',
            },
            {
                key: "0-3-1",
                label: '管理员',
                children:[
                    {
                        key: "0-3-1-0",
                        label: '管理员列表',
                    },                    
                    {
                        key: "0-3-1-1",
                        label: '管理员的添加',
                    }
                ]
            }
        ]
    },
]

// const getKeys = () => {
//   console.log(treeRef.value!.getCheckedKeys(false))
// }

// 添加管理员：
const addAdmin =()=>{    
    data.checkedKeys = treeRef.value!.getCheckedKeys(false);
    
    addAdminApi(data)
    .then((res:any)=>{
        if(res.code==="200"){
            ElMessageBox({
                title:"提示",
                message:"添加成功"
            })
            emit("ok");
        }
    })

}



const cancelHandle = () => {
    console.log("触发事件：cancelHandle");

    emit("closeDrawer", false);
}

</script>

<template>
    <el-form style="max-width: 460px" :model="data">
        <div style="margin: 20px" />
        <el-form-item>
            <el-input class="w-50 m-2" placeholder="请输入账户名" v-model="data.adminname" />
        </el-form-item>

        <el-form-item>
            <el-input class="w-50 m-2" placeholder="请输入密码" type="password" v-model="data.password" />
        </el-form-item>

        <el-select v-model="data.role" class="m-2" placeholder="Select" size="large">
            <el-option label="管理员" value="1" />
            <el-option label="超级管理员" value="2" />
        </el-select>

        <!-- 树形结构 -->
        <el-tree ref="treeRef" :data="treedata" show-checkbox default-expand-all node-key="key" highlight-current/>
        
        <el-form-item>
            <el-button type="primary" @click="addAdmin">添加管理员</el-button>
            <el-button type="primary" @click="cancelHandle">取消</el-button>
        </el-form-item>
    </el-form>

</template>

<style scoped>

</style>

<!-- 权限：
添加管理员：


管理员的权限：

系统首页：0-0
轮播图管理：0-1
  轮播图列表：0-1-0
  添加轮播图：0-1-1

产品管理： 0-2
   产品列表：0-2-0
   秒杀列表：0-2-1
   推荐列表：0-2-2


   adminname: "yangboxing"
checkedKeys: ["0-0", "0-1", "0-1-0", "0-1-1", "0-2", "0-2-0", "0-2-1", "0-2-2", "0-2-3"]
0: "0-0"
1: "0-1"
2: "0-1-0"
3: "0-1-1"
4: "0-2"
5: "0-2-0"
6: "0-2-1"
7: "0-2-2"
8: "0-2-3"
password: "123"
role: 1

-->